<!--
 * @Author: zaijin
 * @Date: 2021-08-16 09:50:27
 * @LastEditTime: 2021-08-16 09:52:18
 * @LastEditors: DESKTOP-PNCL084
 * @Description: In User Settings Edit
 * @FilePath: \vue-g6\src\views\SanGuo\index.vue
-->
<template>
  <div id="container">
    <div id="sanguo" class="sanguo"></div>
    <div class="table">
      <el-table
        :data="tableData"
        border
        size="small"
        style="width: 100%"
        height="calc(100vh - 85px)">
        <el-table-column
          prop="label"
          label="名称"
          align="center">
          <template slot-scope="scope">
            <span style="color: #409EFF;cursor: pointer;" @click="moveNodeToCenter(scope.row.id)">{{scope.row.label}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="degree"
          label="点度中心性"
          sortable
          align="center">
        </el-table-column>
        <!-- <el-table-column
          prop="betweenness"
          label="中介中心性">
        </el-table-column> -->
        <!-- <el-table-column
          prop="closeness"
          label="接近中心性"
          sortable
          align="center">
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import {
  sanguo
} from './sanguo'
import {
  test
} from './test'
import {
  canvasConfig
} from './config.js'
import VisGraph from '@/assets/js/GraphVis/old/visgraph.min.js'
import LayoutFactory from '@/assets/js/GraphVis/old/visgraph-layout.min.js'
export default {
  name: 'SanGuo',
  components: {
    VisGraph,
    LayoutFactory
  },
  data () {
    return {
      visgraph: null,
      config: canvasConfig,
      graphData: sanguo,
      tableData: []
    }
  },
  mounted () {
    this.initGraphVis(sanguo)
  },
  methods: {
    initGraphVis(data) {
      this.configEvent()
      this.visgraph = new VisGraph(document.getElementById('sanguo'), this.config)
      this.renderGraph(data)
      this.allNodeCount()
    },
    /**
     * 设置事件
     * @date 2021-08-02
     */
    configEvent () {
      const _this = this
      // 节点点击
      this.config.node.onClick = function(event, node) {
        const num = _this.findCloseness(node.label)
        _this.$notify({
          title: '节点信息',
          message: node.label + '的接近中心性为' + num,
          duration: 3000
        });
      }
    },
    renderGraph (graphData) {
      this.visgraph.drawData(graphData);
      this.visgraph.moveCenter();
    },
    /**
     * 计算节点信息
     * @date 2021-08-16
     * @returns {any}
     */
    allNodeCount () {
      const list = []
      for (let i = 0; i < this.graphData.nodes.length; i++) {
        const element = this.graphData.nodes[i];
        const obj = {
          id: element.id,
          label: element.label,
          // closeness: this.findCloseness(element.label),
          degree: this.findDegree(element.label)
        }
        list.push(obj)
      }
      this.tableData = list.filter(item => {
        if (item.degree > 0.017) {
          return item
        }
      })
    },
    /**
     * 移动指定节点到中心
     * @date 2021-08-16
     * @param {any} id
     * @returns {any}
     */
    moveNodeToCenter(id) {
      const node = this.visgraph.findNodeById(id)
      this.visgraph.moveNodeToCenter(node)
    },
    /**
     * 计算接近中心性
     * @date 2021-08-16
     * @param {any} thisLabel
     * @returns {any}
     */
    findCloseness(thisLabel) {
      const nodes = this.graphData.nodes
      let count = 0
      for (let i = 0; i < nodes.length; i++) {
        const element = nodes[i];
        if (element.label !== thisLabel) {
          const path = this.visgraph.findShortPath(thisLabel, element.label)
          count += path.length
        }
      }
      if (count > 3) return ((nodes.length - 1) / count).toFixed(6)
      else return 0
    },
    /**
     * 计算点度中心性
     * @date 2021-08-16
     * @param {any} thisLabel
     * @returns {any}
     */
    findDegree(thisLabel) {
      let allCount = 0
      const allNodes = this.visgraph.getGraphData().nodes
      allNodes.forEach(item => {
        if (item.label === thisLabel) {
          allCount = item.inLinks.length + item.outLinks.length
        }
      })
      return (allCount / (this.graphData.nodes.length - 1)).toFixed(8)
    }
  }
}
</script>

<style lang="scss" scoped>
.sanguo {
  width: 100%;
  height: 100%;
}
.table {
  position: absolute;
  right: 0;
  top: 71px;
  width: 300px;
  background-color: #fff;
  padding: 5px;
  border: solid 1px #333;
}
</style>
